<script lang="ts" setup name="B19CustomizeHooks">
import useSum from "../hooks/useSum";
import useDog from "../hooks/useDog";

const [sum, incrSum] = useSum();
const [dogs, getDog] = useDog();
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">自定义Hooks</h1>
  <div class="my-3">
    <div>当前求和：{{ sum }}</div>
    <ul class="grid grid-cols-4 gap-2 my-3">
      <li v-for="d in dogs" :key="d">
        <img :src="d" alt="" class="w-48 object-cover" />
      </li>
    </ul>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="incrSum">sum+1</button>
    <button class="p-1 border shadow" @click="getDog">加多一条狗</button>
  </div>
</template>
